<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-card>
      <span>批量导入应收</span>
      <span style="margin-left:40px;"
        ><a
          href="/static/download/import-receive-info-data.xlsx"
          download="import-receive-info-data.xlsx"
          >下载导入模板</a
        ></span
      >
    </el-card>

    <el-card>
      <el-form enctype="multipart/form-data">
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action="fakeaction"
          :http-request="uploadFn"
          :show-file-list="true"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传EXCEL文件，且不超过10MB
          </div>
          <div
            class="el-upload__tip"
            slot="tip"
            style="color:#6d6ad5"
            v-html="importInfo"
          ></div>
        </el-upload>
        <!-- <el-button
          style="margin-left:45%;"
          size="small"
          type="success"
          @click="submitUpload"
          v-loading.fullscreen.lock="fullscreenLoading"
          >上传到服务器</el-button
        > -->
      </el-form>
    </el-card>

    <el-card v-if="showErrors">
      <el-row class="row-item" v-for="(item, k) in errors" :key="k">
        <el-col :span="6">
          <span>
            {{ item }}
          </span>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";
import * as constant from "@/store/yg/common/constant";
export default {
  data() {
    return {
      fullscreenLoading: false,
      action: "",
      errorTips: "",
      showErrors: false,
      errors: [],
      feeData: [],
      importInfo: "",
      fileList: [
        {
          name: "food.jpeg",
          url: ""
        },
        {
          name: "food2.jpeg",
          url: ""
        }
      ]
    };
  },
  created: function() {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=" +
      untransform(this.$route.params.uri) +
      "&f=uploadReceive&type=blank&name=sub&id=" +
      this.$store.state.edit.id;
  },
  mounted() {
    this.fetchTask();
  },
  methods: {
    uploadFn(params) {
      this.fullscreenLoading = true;
      //自定义上传文件
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("pdf") !== -1,
        isLt4M = file.size / 1024 / 1024 < 4;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //  this.$message.error("只能上传pdf格式!");
      //  return;
      // }

      //if (!isLt4M) {
      //   this.$message.error("只能上传图片大小小于4M");
      //   return;
      //  }
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("items[]", file);
      axios({
        method: "post",
        url: this.action,
        data: form
      })
        .then(response => {
          this.fullscreenLoading = false;
          if (response.data.code === 200) {
            this.errorTips = "导入成功";
            this.$message.success("导入成功!");
            this.feeData.push({
              mes: response.data.data.fileName,
              fee: response.data.data.fullFileName
            });
          } else {
            if (response.data.message) {
              this.errorTips = response.data.message;
              this.errors = this.errorTips.split(",");
              this.showErrors = true;
              this.$notify.error({
                title: "错误",
                message: "上传失败!" + response.data.message
              });
            }
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },

    fetchTask() {
      var param = {};
      param["status"] = 0;
      ajax("findReceiveOrPayImportTask", param).then(
        res => {
          if (res.code === 200) {
            this.importInfo = res.data;
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
